<template>
    <div class="con">
        <div class="commontitle" @click="add()">
            <img src="../assets/images/add.png" alt>
            添加支付信用卡
        </div>

        <ul class="common" v-show="!show">
            <li v-for="(item,index) in data" :key="index" @click="choosecard(item,index)">
                <img :src="item.logoUrl" class="logo">
                {{item.bankName}}
                （{{item.accountNo.substring(item.accountNo.length - 4)}}）
                <span
                    v-show="item.checked"
                >
                    <img src="../assets/images/ok.png" alt>
                </span>
            </li>
        </ul>
        <div class="empty" v-show="show">
            <img src="../assets/images/empty.png" alt>
            <p>您尚未添加支付信用卡</p>
        </div>

        <div class="btn" @click="ok()">
            <button>下一步</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "chooseCredit",
    data() {
        return {
            show: false,
            data: {},
            timestamp: ""
        };
    },
    methods: {
        ok() {
        
            if (this.show == true) {
                this.$toast("您尚未添加支付信用卡");
            } else if (localStorage.getItem("deductCardId") == null) {
                this.$toast("您选择支付信用卡");
            }else{
            this.$router.push({ name: "trade" });
            
            }
        },
        add() {
            this.$router.push({ name: "addcreditcard" ,params:{type:1}});
        },
        choosecard(item, index) {
            this.data.forEach((item1, index) => {
                item1.checked = false;
            });
            this.data[index].checked = true;
            localStorage.setItem("deductCardId", item.id);
            localStorage.setItem("xylogoUrl", item.logoUrl);
            localStorage.setItem("xybankName", item.bankName);
            localStorage.setItem("xyaccountNo", item.accountNo);
            localStorage.setItem("xyphone", item.phone);


       
       

        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.axios({
            method: "post",
            url: `${
                this.siteUrl
            }/app/bankCard/getBankCardListByUserId?appid=web.2019&format=json&timestamp=${
                this.timestamp
            }`,
            data: {
                userId: localStorage.getItem("userId"),
                cardType: 1
            }
        })
            .then(response => {
                console.log(response);
                if (response.data.success == 1) {
                    if (response.data.data.length == 0) {
                        this.show = true;
                    } else {
                        this.show = false;

                        this.data = response.data.data;

                        this.data.forEach((item, index) => {
                            if (typeof item.checked == "undefined") {
                                this.$set(item, "checked", false);
                            }
                        });
                        console.log(this.data);
                         
                    }
                } else {
                    this.$toast(response.data.message);
                }
            })
            .catch(error => {
                console.log(error);
                this.$toast("连接服务器异常");
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
    overflow: hidden;
}

.con .commontitle {
    width: 100%;
    height: 62px;
    line-height: 62px;
    color: #2d3659;
    font-size: 14px;
    padding-left: 15px;
    background: #fff;
    margin-top: 24px;
    margin-bottom: 12px;
}
.commontitle img {
    width: 16px;
    margin-right: 10px;
    vertical-align: -1px;
}
.common {
    background: #fff;
}

.common li {
    position: relative;
    width: 100%;
    line-height: 60px;
    border-bottom: 1px solid #f2f2f2;
    width: 94%;
    margin-left: 3%;
    font-size: 16px;
}
.common li .logo {
    width: 24px;
    vertical-align: -5px;
    margin-left: 2px;
    margin-right: 12px;
}
.common li span {
    position: absolute;
    right: 10px;
    font-size: 12px;
    color: #999;
}
.common li span img {
    width: 20px;
    height: 20px;
    margin-top: 18px;
}
.btn {
    width: 90%;
    height: 48px;
    line-height: 48px;
    background: #ffae4e;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0px 10px 30px 0px #fbc27f;
    position: fixed;
    bottom: 40px;
    left: 5%;
}
.btn button {
    width: 100%;
    font-size: 17px;
    color: #fff;
    background: transparent;
}

.empty {
    text-align: center;
    margin-top: 58px;
}

.empty img {
    width: 190px;
    height: 190px;
}
.empty p {
    color: #a6a9b5;
    font-size: 16px;
    font-weight: 200;
    margin-top: 25px;
}
</style>
